<template>
  <van-popup
    :overlay="false"
    :style="{height:'100%', borderRadius:'10px'}"
    closeable
    position="bottom"
    round
    v-model="show"
  >
    <van-cell-group :border="false">
      <van-cell value="频道编辑" />
      <van-cell :border="false">
        <template #title>
          <span class="custom-title">我的频道</span>
          <span class="title_desc">点击进入频道</span>
        </template>
        <template #right-icon>
          <van-button
            @click="updataMyChannel"
            round
            size="mini"
            type="default"
          >{{iconShow?'完成':'编辑'}}</van-button>
        </template>
      </van-cell>
      <van-grid
        :border="false"
        :gutter="10"
      >
        <van-grid-item
          :key="myChannel.id"
          v-for="myChannel in channels"
        >
          {{myChannel.name}}
          <van-icon
            @click="deleteMyChannel(myChannel)"
            name="close"
            v-if="myChannel.name!=='推荐' && iconShow === true"
          />
        </van-grid-item>
      </van-grid>

      <van-cell :border="false">
        <template #title>
          <span class="custom-title">推荐频道</span>
          <span class="title_desc">点击添加频道</span>
        </template>
      </van-cell>
      <van-grid
        :border="false"
        :gutter="10"
      >
        <van-grid-item
          :key="recommendChannel.id"
          :text="recommendChannel.name"
          @click="addChannel(recommendChannel)"
          class="van-multi-ellipsis--l2"
          v-for="recommendChannel in recommendChannels"
        />
      </van-grid>
    </van-cell-group>
  </van-popup>
</template>

<script>
import {
  getAllChannels,
  addUserChannel,
  deleteUserChannel
} from "../../../network/home";
import storage from "../../../utils/storage";

import { mapState } from "vuex";

export default {
  name: "ChannelEditor",
  components: {},
  props: {
    myChannels: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      show: false,
      recommendChannels: [],
      channels: this.myChannels,
      iconShow: false,
      allChannel: []
    };
  },
  computed: {
    ...mapState(["USER_TOKEN"]),
    // channels() {
    //   return this.myChannels
    // }
  },
  watch: {
    myChannels(val) {
      //建立了myChannels和channels的连接
      //所以channels改变myChannels也会改变
      //myChannels和home页面的channels也建立了连接
      //三者之间的会相互影响
      this.channels = val;
      let rmdArr = this.allChannel.filter(i => {
        return this.myChannels.findIndex(item => item.id === i.id) === -1;
      });
      this.recommendChannels = rmdArr;
    }
  },
  created() {
    this.$bus.$on("showChannelPopup", () => {
      this.show = true;
    });
    this.loadRecommends();
  },
  methods: {
    async loadRecommends() {
      const result = await getAllChannels();
      // console.log(result);
      if (result.message === "OK") {
        this.allChannel = result.data.channels;
        let rmdArr = result.data.channels.filter(i => {
          return this.myChannels.findIndex(item => item.id === i.id) === -1;
        });
        this.recommendChannels = rmdArr;
      }
    },
    //添加频道
    // 如果未登录，则存储到本地
    // 如果已登录，则存储到线上
    // 找到数据接口
    // 封装请求方法
    // 请求调用
    async addChannel(channel) {
      this.channels.push(channel);
      if (this.USER_TOKEN) {
        const result = await addUserChannel([
          {
            id: channel.id, // 频道 id
            seq: this.channels.length // 频道的 序号
          }
        ]);
        if (result.message !== "OK") {
          this.$toast("添加频道失败");
        }
      } else {
        storage.setItem("USER_CHANNELS", this.channels);
      }
    },
    //点击编辑频道按钮
    updataMyChannel() {
      this.iconShow = !this.iconShow;
    },
    //删除我的频道
    async deleteMyChannel(channel) {
      let index = this.channels.findIndex(i => i.id === channel.id);
      this.channels.splice(index, 1);
      if (this.USER_TOKEN) {
        await deleteUserChannel(channel.id);
      } else {
        storage.setItem("USER_CHANNELS", this.channels);
      }
    }
  }
};
</script>

<style scoped lang="stylus">
/deep/ .van-popup__close-icon
  top 10px
  right 5px

.van-cell__value--alone
  text-align center
  font-weight bold
  font-size 16px

.title_desc
  font-size 12px
  color #aaa
  margin-left 6px
  position relative
  top 1px

.van-button
  color rgb(229, 97, 91)
  border-color rgb(229, 97, 91)

.van-grid-item
  height 44px

/deep/ .van-grid-item__content
  border-radius 6px
  background-color #f4f5f6

/deep/ .van-grid-item__text
  font-size 14px
  color #000

.van-icon
  position absolute
  top -5px
  right 5px
  color rgb(229, 97, 91)
</style>